<template>
	<div class="app-aside">
		<div class="app-aside-header">
			<el-menu :default-active="$route.path" :collapse="collapse" unique-opened router>
				<template v-for="item in menuList">
					<el-submenu v-if="item?.children" :key="item.path" :index="item.path">
						<template #title>
							<i :class="item.meta.icon"></i>
							<span>{{ item.meta.title }}</span>
						</template>
						<el-menu-item v-for="route in item.children" :key="route.path" :index="`${item.path}/${route.path}`">
							{{ route.meta.title }}
						</el-menu-item>
					</el-submenu>
					<el-menu-item v-else :key="item.path" :index="item.path">
						<i :class="item.meta.icon"></i>
						<template #title>
							<span>{{ item.meta.title }}</span>
						</template>
					</el-menu-item>
				</template>
			</el-menu>
		</div>
		<div class="app-aside-footer" @click="changeFold">
			<v-icon icon="streamline-flex-color:track-select-right-tool" height="28px" :flip="flip" />
		</div>
	</div>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {
	name: "LayAside",
	data() {
		return {};
	},
	computed: {
		...mapState("menu", ["collapse", "menuList"]),
		flip() {
			return this.collapse ? "vertical" : "horizontal";
		}
	},
	methods: {
		...mapActions("menu", ["setCollapse"]),
		changeFold() {
			this.setCollapse(!this.collapse);
		}
	}
};
</script>

<style lang="scss" scoped>
.app-aside {
	height: calc(100dvh - 52px);
	display: grid;
	grid-template-rows: 1fr 44px;
	box-shadow: 1px 0 0 var(--color-border);

	&-header {
		overflow: hidden;
		overflow-y: overlay;
		:deep(.el-menu) {
			height: 100%;
			overflow-y: overlay;
			border-right: none;
			&:not(.el-menu--collapse) {
				width: 200px;
			}
		}
		:deep(.el-menu--collapse) {
			width: 52px;
			border-right: none;
			.el-tooltip {
				padding: 0 12px !important;
			}
		}
		:deep(.el-menu-item),
		:deep(.el-submenu__title) {
			padding: 0 12px !important;
			height: 44px;
			line-height: 44px;
			&.is-active {
				font-weight: bold;
				background-color: var(--color-background);
			}
		}
		:deep(.el-menu--inline) .el-menu-item {
			padding-left: 32px !important;
		}
	}

	&-footer {
		cursor: pointer;
		box-shadow: inset 0 1px 0 var(--color-border);
		background-color: rgba(0, 0, 0, 0.02);
		transition: all 0.3s ease-in-out;
		display: flex;
		justify-content: center;
		align-items: center;
		&:hover {
			background-color: var(--color-background);
		}
	}
}
</style>
